<template>
  <div>
    <div class="act-grab">
      <!-- 星期 -->
      <div class="slide-menu">
        <div class="slide">
          <div class="scroll">
            <span 
              v-for="t in weekdays" :key="t.weekday" 
              :class="{on: Number(weekActive) === Number(t.weekday)}" 
              @click="weekSelect(t.weekday)"
            >{{t.weekday_str}}</span>
          </div>
        </div>
      </div>
      <!-- 选项 -->
      <!-- <div class="tab-menu">
        <div class="content">
          <span class="tab" 
            v-for="(v, k) in tabMenu" :key="k" 
            :class="{active: Number(tabActive) === Number(v.id)}"
            @click="tabSelect(v.id)"
          >{{v.name}} ({{v.num}})</span>
        </div>
      </div> -->
      <!-- 时间 -->
      <div class="time-menu">
        <div class="slide" ref="timeLine">
          <div class="scroll">
            <span 
              v-for="(t, i) in timeObj" :key="i" 
              :class="{on: timeActive === t.time}" 
              @click="timeSelect(t.time)"
            >
              <p>{{t.time}}</p>
              <p>{{t.status}}</p>
            </span>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="lists" ref="lists">
        <div class="list-item"
          v-for="v in actList" :key="v.id"
          :class="{'is-new': false}"
          @click="$router.push({name: 'ActivityDetail', params: {id: v.id}})"
        >
          <!-- <img :src="v.image" class="logo"> -->
          <img src="/src/assets/logo.png" class="logo">
          <div class="content">
            <div class="title">{{v.name}}</div>
            <div class="desc">
              <span>{{v.brief_introduction}}</span>
              <div class="attribute">
                <img :src="`/src/assets/icons/heart-${v.if_attention ? 'red' : 'gray'}.png`">
                <span class="text">{{v.hot_level}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ActivityGrab',
    data () {
      return {
        weekdays: {},
        weekActive: this.$route.query.week,
        tabMenu: [
          {id: 1, name: '我的活动', num: 0},
          {id: 2, name: '待入活动', num: 0}
        ],
        tabActive: this.$route.query.status || 1,
        timeObj: [],
        timeActive: this.$route.query.time || '00:00',
        actList: []
      }
    },
    methods: {
      weekSelect (v) {
        this.weekActive = v
        this.urlReplace({week: v})
        this.getList()
      },
      tabSelect (v) {
        this.tabActive = v
        this.urlReplace({status: v})
        this.getList()
      },
      timeSelect (v) {
        this.timeActive = v
        this.urlReplace({time: v})
        this.getList()
        console.log(this.$refs.timeLine.scrollLeft)
      },
      urlReplace (obj) {
        let query = {}
        // 浅拷贝
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, obj)
        this.$router.replace({name: 'ActivityGrab', query})
      },
      getList () {
        let params = {
          weekday: this.weekActive,
          // status: this.tabActive,
          time: this.timeActive
        }
        this.$post('/vue/activity/grab_list', params).then(data => {
          this.timeObj = data.display_times
          this.actList = data.act_list
          this.weekActive = this.$route.query.week || Number(data.weekday_list[0].weekday)
          this.weekdays = data.weekday_list
          this.tabMenu[0].num = data.collect_cnt
          this.tabMenu[1].num = data.no_collect_cnt
          // 时间滑动
          for (let i = 0; i < this.timeObj.length; i++) {
            if (this.timeObj[i].time === this.timeActive && i >= Math.ceil(this.timeObj.length / 2)) {
              this.$nextTick(() => {
                this.$refs.timeLine.scrollLeft = this.$refs.timeLine.scrollWidth - document.documentElement.clientWidth
              })
              break
            }
          }
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-226: rgb(226, 226, 226);
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);

  .act-grab {
    width: 100%;
    min-height: 100vh;
    background-color: #FFF;
    .slide-menu {
      font-size: 0;
      color: #a9a9a9;
      border-bottom: 1px solid #e2e2e2;
      background-color: #FFF;
      display: flex;
      .slide {
        overflow-x: scroll;
        display: inline-block;
        vertical-align: middle;
        flex: 1;
        margin-bottom: -1px;
        overflow-x: scroll;
        &::-webkit-scrollbar{ 
          width: 0;
          height: 0;
        }
        .scroll {
          white-space: nowrap;
          -webkit-overflow-scrolling : touch;
        }
        span {
          display: inline-block;
          // width: 65px;
          width: calc(100vw / 7);
          font-size: 13px;
          line-height: 24px;
          padding: 12px 0;
          position: relative;
          &.on {
            border-bottom: 1px solid #6cb8de;
            color: #6cb8de;
          }
          &.badge::after {
            content: '';
            position: absolute;
            top: 12px;
            right: 0px;
            width: 8px;
            height: 8px;
            border-radius: 100%;
            background-color: rgb(255, 89, 22);
          }
        }
      }
      .fixed {
        width: 68px;
        padding: 12px 0px;
        display: inline-block;
        vertical-align: middle;
        font-size: 0;
        border-left: 1px solid #e2e2e2;
        flex: 17;
        img {
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          color: #7c7c7c;
          font-size: 13px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .mint-popup-right {
        width: 82vw;
        height: 100vh;
      }
    }
    .tab-menu {
      font-size: 15px;
      font-weight: 500;
      line-height: 24px;
      color: @c-169;
      border-bottom: 1px solid @c-226;
      .content {
        display: flex;
        justify-content: space-between;
        margin-bottom: -1px;
        .tab {
          padding: 12px 0;
          flex: 1;
          &.active {
            color: @c-blue;
            border-bottom: 1px solid @c-blue;
          }
        }
      }
    }
    .time-menu {
      font-size: 0;
      color: #a9a9a9;
      background-color: #FFF;
      .slide {
        width: 100vw;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling : touch;
        &::-webkit-scrollbar { 
          width: 0;
          height: 0;
        }
        .scroll {
          display: inline-flex;
          span {
            flex: 1;
            display: block;
            width: calc(100vw / 10);
            min-width: 60px;
            font-size: 13px;
            line-height: 24px;
            padding: 12px 0;
            position: relative;
            &.on {
              color: #6cb8de;
            }
            &.badge::after {
              content: '';
              position: absolute;
              top: 12px;
              right: 0px;
              width: 8px;
              height: 8px;
              border-radius: 100%;
              background-color: rgb(255, 89, 22);
            }
          }
        }
      }
      .fixed {
        width: 68px;
        padding: 12px 0px;
        display: inline-block;
        vertical-align: middle;
        font-size: 0;
        border-left: 1px solid #e2e2e2;
        flex: 17;
        img {
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          color: #7c7c7c;
          font-size: 13px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .mint-popup-right {
        width: 82vw;
        height: 100vh;
      }
    }
    .line {
      height: 8px;
      background-color: rgb(240, 244, 247);
    }
    .lists {
      padding: 12px 0 0 12px;
      height: calc(~'100vh - 141px');
      overflow-x: hidden;
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
      .list-item {
        padding: 0 12px 12px 0;
        border-bottom: 1px solid @c-235;
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: space-between;
        position: relative;
        &.is-new {
          &::after {
            content: '';
            position: absolute;
            top: 0%;
            left: 0;
            z-index: 2;
            width: 40px;
            height: 40px;
            background-image: url('/src/assets/icons/new-green.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
        .logo {
          width: 56px;
          height: 56px;
          flex: 0 0 auto;
          margin-right: 12px;
        }
        .content {
          flex: 1;
          text-align: left;
          .title {
            font-size: 13px;
            font-weight: bold;
            line-height: 24px;
            color: @c-124;
            margin-bottom: 8px;
          }
          .desc {
            font-size: 12px;
            line-height: 24px;
            color: @c-169;
            display: flex;
            span {
              flex: 1 1 auto;
            }
            .attribute {
              flex: 0 0 auto;
              img {
                width: 24px;
                height: 24px;
                vertical-align: middle;
              }
              .text {
                width: 20px;
                display: inline-block;
                vertical-align: middle;
                font-size: 12px;
                line-height: 24px;
                color: @c-169;
              }
            }
          }
        }
      }
    }
  }
</style>